<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../lib/vue.min.js"></script>
</head>
<body>
    <div id="box">
       
      <p>单价：<input type="text" v-model="price" /></p>
      <p>数量：<input type="text" v-model="number"/></p>

      <p>金额计算方法：{{mysum()}}</p>
      <p>金额计算属性：{{mycomptedsum}}</p>
      <p>watch方法：{{sum }}</p>
    </div>	

    <script type="text/javascript">
    	new Vue({
            el:"#box",
            data:{
                price:100,
                number:1,
                sum:0
            },

            watch:{
                price(){
                    console.log("price状态改变了")
                    if(this.number*this.price>=1000){
                        this.sum = this.number*this.price
                    }else{
                        this.sum = this.number*this.price+100
                    }
                } ,
                number(){
                    console.log("number状态改变了")
                    if(this.number*this.price>=1000){
                        this.sum = this.number*this.price
                    }else{
                        this.sum = this.number*this.price+100
                    }
                } 
            },

            methods:{
                mysum(){
                    var sum =this.price*this.number
                    if(sum>=1000){
                        return sum;
                    }else{
                        return sum+100
                    }
                }
            },
            computed:{
                mycomptedsum(){
                    var sum =this.price*this.number
                    if(sum>=1000){
                        return sum;
                    }else{
                        return sum+100
                    }
                }
            }
        })
       
    	
    </script>
</body>
</html>